<template>
  <el-row :gutter="20">
    <el-col :span="4"></el-col>
    <el-col :span="16">
      <el-page-header @back="backToHome">
        <template #content>
          <span class="text-large font-600 mr-3"> {{ post.title }} </span>
        </template>
        <div class="header-info">
          <PostInfoBar :post='post'/>
        </div>
        <MdPreview :modelValue="post.content" :editorId="state.id" :previewTheme="state.theme"
                   :showCodeRowNumber="state.showCodeRowNumber"/>
      </el-page-header>

    </el-col>
    <el-col :span="4">
      <el-affix :offset="125">
        <MdCatalog :editorId="state.id" :scrollElement="scrollElement"/>
      </el-affix>
    </el-col>
  </el-row>
  <el-backtop :right="500" :bottom="100"/>

</template>

<script setup lang="ts">
import {reactive, onMounted, ref} from 'vue';
import {MdPreview, MdCatalog} from 'md-editor-v3';
// preview.css相比style.css少了编辑器那部分样式
import 'md-editor-v3/lib/preview.css';
import {useRoute, useRouter} from 'vue-router';  //1.先在需要跳转的页面引入useRouter
import {getPostContent} from '@/api/customer'
import PostInfoBar from "@/components/PostInfoBar.vue";
import {postPreview} from "@/store/admin";

const {query} = useRoute()  //2.在跳转页面定义router变量，解构得到指定的query和params传参的参数
const router = useRouter()
const post = ref({
  tags: []
})

onMounted(() => {
  if(query.preview){
    post.value = postPreview.value
    console.log(postPreview.value)
  }else{
    getPostContent(query.id).then((res) => {
    console.log(res)
    post.value = res.data;
    post.value.content = '>' + post.value.excerpt + ' \n\n ' + post.value.content
  });
  }
})
const state = reactive({
  id: 'my-editor',
  theme: 'vuepress',
  showCodeRowNumber: true,
  catalogList: []
});

const scrollElement = document.documentElement;

function backToHome() {
  router.back()
}
</script>

<style scoped>
.title {
  font-family: FolderMedDB Bold;
  font-weight: 800;
  line-height: 1.45;
  margin-top: 2em;
  margin-left: 20px;
}

.header-info {
  background-color: white;
  padding-top: 10px;
  padding-left: 20px;
}
</style>